Skip to content

Improve quick note editor interactions & fix filter chips responsiveness#964

Open
ishaanxgupta wants to merge 8 commits into
mainfrom
ishaan/dev2
Open

Improve quick note editor interactions & fix filter chips responsiveness#964
ishaanxgupta wants to merge 8 commits into
mainfrom
ishaan/dev2

Conversation

@ishaanxgupta
Copy link
Copy Markdown
Contributor

@ishaanxgupta ishaanxgupta commented May 18, 2026

On phone, the filter chips now get their own horizontally scrollable row, so All, Notes, Tweets, Web Pages, and any future connection chips can fit without squeezing. The Grid / Timeline segmented control stays grouped on the next row and aligned to the right.

The QuickNoteCard now uses the same TipTap TextEditor as the full-screen note, so typing / should show the slash-command options like headings. It also expands from 120px to 188px when focused or when it has draft content, then collapses again on blur if empty.

I also updated TextEditor so it can be used inline safely: it now supports editable={false} while saving, and it syncs external content resets without constantly resetting the editor while typing.

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented May 18, 2026

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
✅ Deployment successful!
View logs
supermemory-mcp 4873082 May 21 2026, 09:52 AM

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented May 18, 2026

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
supermemory-app 4873082 Commit Preview URL

Branch Preview URL
May 21 2026, 09:53 AM

@ishaanxgupta ishaanxgupta changed the title fix filter chips responsiveness Improve quick note editor interactions & fix filter chips responsiveness May 18, 2026
@ishaanxgupta ishaanxgupta marked this pull request as ready for review May 20, 2026 09:20
@graphite-app graphite-app Bot requested a review from Dhravya May 20, 2026 09:20
@claude
Copy link
Copy Markdown

claude Bot commented May 20, 2026

Claude finished @ishaanxgupta's task in 1m 37s —— View job


Review Complete

  • Gather context and understand changes
  • Review diff for bugs and security issues
  • Post review summary

Overview: Replaces the QuickNoteCard textarea with the TipTap TextEditor for consistent editing experience (including slash commands), adds expand/collapse behavior based on focus and content, and makes filter chips horizontally scrollable on mobile.

Issues found: None — this looks good to ship.

The implementation is solid:

  • draftRef pattern (quick-note-card.tsx:22-23): Correctly uses a ref to capture the latest draft value, ensuring the submit callback never has stale closure issues
  • Content sync effect (text-editor/index.tsx:91-101): Properly compares serialized markdown content before resetting, preventing the editor from resetting while the user is typing. The change from if (initialContent) to if (initialContent !== undefined) correctly allows clearing the editor to empty content
  • editable prop sync (text-editor/index.tsx:103-105): Uses setEditable() to dynamically enable/disable the editor during save operations
  • Focus/blur containment (quick-note-card.tsx:52-57): e.currentTarget.contains(e.relatedTarget) correctly prevents collapsing when focus moves between elements inside the editor container
  • Event listener cleanup (quick-note-card.tsx:62-73): Escape key handler properly adds/removes the listener in the effect cleanup
  • CSS layout changes (memories-grid.tsx): Straightforward responsive adjustments — horizontal scroll on mobile, flex-wrap on desktop, shrink-0 on buttons

Score: 10/10

Copy link
Copy Markdown

@claude claude Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overview: Replaces the QuickNoteCard textarea with the TipTap TextEditor for consistent editing experience (including slash commands), adds expand/collapse behavior based on focus and content, and makes filter chips horizontally scrollable on mobile.

Issues found: None — this looks good to ship.

The implementation is solid:

  • The draftRef pattern in quick-note-card.tsx correctly ensures the submit callback always has the latest draft value without stale closure issues
  • The content sync effect in text-editor/index.tsx properly compares serialized content to avoid resetting the editor while the user is typing
  • The editable prop is correctly synced via setEditable() effect
  • Focus/blur handlers for expand/collapse behavior properly check e.currentTarget.contains(e.relatedTarget) to prevent collapsing on internal focus changes
  • The CSS changes for responsive filter chips are straightforward layout adjustments

Score: 10/10

ishaanxgupta and others added 6 commits May 20, 2026 22:59
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The editorHeight variable was defined but never used. Now it's applied
to the TextEditor container div. Also fixed formatting to match biome
expectations.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant